<template>
	<view id="login">
		<image src="https://sm.hobon.cc/static/bg.png" class="bg"></image>
		<view class="logo-wrapper">
			<image src="/static/image/logo-black.png" mode="widthFix" class="logo"></image>
		</view>
		<view class="title">
			好帮集配
		</view>
		<!-- <view class="tip">
			非开放系统，仅供已开通供应商账号的工作人员登录使用
		</view> -->
		<!-- getphonenumber -->
		<view class="login-form">
			<view class="item">
				<uni-icons type="person" size="24" color="#02A80D"></uni-icons>
				<input type="text" v-model="phone" placeholder="输入账号" class="input" />
				<uni-icons type="clear" v-if="phone" @tap="phone= ''" size="26" class="clear"
					color="#898989"></uni-icons>
			</view>
			<view class="item">
				<uni-icons type="locked" size="24" color="#02A80D"></uni-icons>
				<input type="text" password v-model="loginCode" placeholder="输入密码" class="input" />
			</view>
		</view>

		<button class="btn-wrapper" @click="login">
			<!-- <image src="https://adimg.yooowu.com/static/images/login/wx_icon.png" mode="widthFix" class="icon"></image> -->
			<text>登录</text>
		</button>

		<view class="version" @longpress="changeEnv">
			v{{ version }}-{{ environment }}
		</view>
		<!-- <view class="small-btn" @click="goBack">
			取消登录
		</view> -->
		<!-- <view style="position: relative; height: 300upx;overflow: auto;">
			{{msg}}
		</view> -->
		<!-- <view class="agreement-wrapper">
			<checkbox color="#1EAF22" @click="changeChecked" class="checked" :checked="false" />已阅读并同意
			<text style="color:#1EAF22" @click="agreement">《四季鲜集配供应商端小程序隐私保护条款》</text>
		</view> -->

		<!-- <uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="取消" confirmText="重新注册" title="提示" content="你的账号已经被注销，是否要重新注册账号？"
				@confirm="dialogConfirm" @close="dialogCancel"></uni-popup-dialog>
		</uni-popup> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				checked: false,
				openType: '',
				url: "",
				msg: "",
				role: '',
				params: null,
				from: '',
				time: 60,
				btnText: '获取验证码',
				timer: null,
				disabled: false,
				loading: false,
				phone: '',
				loginCode: '',
				environment: uni.getStorageSync('environment') || 'P',
				version: '1.0.0'
			}
		},
		onLoad(option) {
			let _this = this;
			if (option.params) {
				this.params = JSON.parse(option.params)
			}
			if (option.target) {
				this.from = uni.getStorageSync('targetUrl')
			}
			plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
				_this.version = widgetInfo.version;
			})

		},
		mounted() {
			//this.login()
		},
		//computed: mapState(['stationIdCurrent', 'sellerIdCurrent']),
		methods: {
			changeEnv() {
				uni.showActionSheet({
					itemList: ['测试环境', '体验环境', '生产环境'],
					success: (res) => {
						if (res.tapIndex === 0) {
							uni.setStorageSync('environment', 'D')
						} else if (res.tapIndex === 1) {
							uni.setStorageSync('environment', 'T')
						} else if (res.tapIndex === 2) {
							uni.setStorageSync('environment', 'P')
						}
						this.environment = uni.getStorageSync('environment')
					},
					fail: (err) => {
						console.log(err.errMsg);
					}
				});
			},
			privacy() {
				uni.navigateTo({
					url: '/pages/privacy/privacy'
				})
			},
			agreement() {
				uni.navigateTo({
					url: '/pages/privacy/agreement'
				})
			},
			goBack() {
				uni.navigateBack()
			},
			async login() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入账号',
						icon: 'error'
					})
					return
				}
				if (!this.loginCode) {
					uni.showToast({
						title: '请输入密码',
						icon: 'error'
					})
					return
				}
				const data = await this.$api.post('/login', {
					password: this.loginCode,
					username: this.phone
				})
				if (data.code === 200) {
					uni.setStorageSync('AppToken', data.token);
					this.$store.commit('setToken', uni.getStorageSync('AppToken'));
					this.$store.commit('setUserInfo');
					this.go2Index()
				}
			},
			go2Index() {
				if (this.$store.state.userInfo.userId) {
					// if (this.$store.state.userInfo.account.status === 2) {
					// 	uni.hideLoading()
					// 	this.$refs.alertDialog.open()
					// 	return
					// }
					uni.hideLoading()
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} else {
					setTimeout(() => {
						this.go2Index();
					}, 100)
				}
			},
			addQueryString(params) {
				var str = '';
				for (var Key in params) {
					str += Key + '=' + params[Key] + '&';
				}
				return '?' + str.substr(0, str.length - 1);
			}
		},
		components: {

		}
	}
</script>

<style lang="scss">
	#login {
		overflow: hidden;
		text-align: center;
		padding-top: 35%;
		height: 100vh;

		.bg {
			position: fixed;
			width: 100%;
			height: 100vh;
			left: 0;
			top: 0;
		}

		.logo-wrapper {
			position: relative;
			margin: 0 auto 0 auto;

			.logo {
				width: 166upx;
				//height: 145upx;
			}
		}

		.title {
			font-size: 38upx;
			color: #000;
			position: relative;
			margin-top: 10upx;
			//text-shadow: 1upx 0 #666;
		}

		.tip {
			font-size: 24upx;
			color: #000;
			position: relative;
			//text-shadow: 1upx 0 #999;
			margin-top: 30upx;
		}

		.login-form {
			padding: 32upx 75upx;
			z-index: 9;
			position: relative;

			.item {
				display: flex;
				align-items: center;
				background-color: #ffffff;
				height: 90upx;
				border-radius: 45upx;
				margin-top: 30upx;
				padding: 0 32upx;
				position: relative;

				.input {
					flex: 1;
					text-align: left;
					padding: 0 20upx;
				}

				.clear {}

				.btn-text {
					height: 90upx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 250upx;
					border-left: 1upx solid #efefef;
					color: #1eaf22;

					&.disabled {
						color: #898989;
					}
				}
			}
		}

		.btn-wrapper {
			margin: 50upx auto 30upx auto;
			width: 600upx;
			height: 89upx;
			display: flex;
			justify-content: center;
			align-items: center;
			//background: red;
			position: relative;
			color: #ffffff;
			font-size: 32upx;
			background: linear-gradient(267deg, #1eaf22 0%, #73e008 100%);
			border-radius: 44upx;
			box-shadow: 0px 22upx 81upx 0px #a8f4a1;

			.icon {
				width: 38upx;
				height: 32upx;
				position: relative;
				top: 4upx;
				margin-right: 10upx;
			}
		}

		.small-btn {
			color: #888888;
			position: relative;
			margin-bottom: 20rpx;
		}

		.agreement-wrapper {
			position: relative;
			font-size: 24upx;
			color: #616866;

			.checked {
				transform: scale(.7);
				position: relative;
				top: -3upx;
			}
		}

		.version {
			position: fixed;
			bottom: 20upx;
			left: 0;
			width: 100%;
			text-align: center;
			font-size: 32upx;
			color: #999999;
		}
	}
</style>